<template>
  <div class="page-container">
        <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员权益设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar w100" >
      <el-form :inline="true" :model="filters" :size="size" ref="filters" >
        <el-row class="search-input">
          <el-row class="times mr30">
            <el-form-item label="创建时间：" prop="startTime">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                placeholder="开始时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeStartDate"
                :picker-options="startDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                placeholder="结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="权益名称：" >
             <el-input v-model="filters.legalRuleName" placeholder="输入权益名称" maxlength="80" clearable ></el-input>
            </el-form-item>
            <el-form-item label="权益类型：" >
                <el-select v-model="filters.legalRuleType"  placeholder="全部" clearable>
                  <el-option
                      v-for="item in ruleTypeList"
                      :key="item.id"
                      :label="item.ruleName"
                      :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
          </el-row>
          
        </el-row>
        <el-row class="search-button-noborder">
          <el-form-item>
            <kt-button icon="el-icon-search" :label="'搜索'" type="primary" @click="findPageClick(null)" :size="size"/>
          </el-form-item>
          <el-form-item>
            <kt-button :label="$t('action.reset')" type="primary" plain @click="resetForm('filters')" :size="size"/>
          </el-form-item>
          <el-form-item>
            <kt-button label="添加权益" type="primary" @click="addRule()" :size="size" perms="mem:rule:add" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <el-table
            :data="tableList"
            :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
            :highlight-current-row="true"
            :max-height="15000"
            :size="'mini'"
            style="width: 100%"
            class="specialTable"
            :border="false"
            v-loading="loading"
            element-loading-text="加载中...请稍后..."
          >
            <el-table-column align="center" label="编号"  element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.id}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="权益名称"  element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.legalRuleName || '-'}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="权益类型"  element-loading-text>
              <template slot-scope="scope">
                <span v-if="scope.row.legalRuleType == 1">购物权益</span>
                <span v-if="scope.row.legalRuleType == 2">积分权益</span>
                <span v-if="scope.row.legalRuleType == 3">物流权益</span>
                <span v-if="scope.row.legalRuleType == 4">活动特权</span>
                <span v-if="scope.row.legalRuleType == 5">内容特权</span>
                <span v-if="scope.row.legalRuleType == 6">服务特权</span>
                <span v-if="scope.row.legalRuleType == 7">等级升级</span>
                <span v-if="scope.row.legalRuleType == null">-</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="所属组织"  element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.deptName || '-'}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间"  element-loading-text>
              <template slot-scope="scope">
                <span>{{ scope.row.createTime || '-'}}</span>
              </template>
            </el-table-column>
            <el-table-column class-name="status-col" align="left" fixed="right" label="操作" width="450" >
              <template slot-scope="scope">
                <kt-button
                  @click="handleEdit(scope.row)" type="text" size="mini" style label="编辑" perms="mem:rule:edit">
                </kt-button>
                 <kt-button
                  @click="handleDeleteParams(scope.row)" type="text" size="mini" style label="删除" perms="mem:rule:delete">
                </kt-button>
                <kt-button
                  @click="handleLookPower(scope.row)" type="text" size="mini" style label="查看权益" perms="mem:rule:look">
                </kt-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="currentChange"
              :current-page="filters.start"
              :page-size="filters.limit"
              :total="totalSize"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="sizeChange"
            ></el-pagination>
          </div>
  </div>
</template>

<script>
  import CyTable from "@/views/Core/JicTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import {validatePhone,validateContacts,isEmail,isNumber} from '@/utils/validate'
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import XLSX from "xlsx";
  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        startDateDisabled: {},//开始时间限制
        endDateDisabled: {},//结束时间限制
        totalSize:0,
        tableList:[],
        loading:false,
        disabled: true,
        ruleTypeList: [{
          id: '1',
          ruleName: '购物权益'
        }, {
          id: '2',
          ruleName: '积分权益'
        }, {
          id: '3',
          ruleName: '物流权益'
        }, {
          id: '4',
          ruleName: '活动特权'
        }, {
          id: '5',
          ruleName: '内容特权'
        }, {
          id: '6',
          ruleName: '服务特权'
        }, {
          id: '7',
          ruleName: '等级升级'
        }],
        deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
        size: "mini",
        filters: {
          startTime:null, 
          endTime:null,
          legalRuleName:null,
          legalRuleType:null,
          status:2,   
        },
        columns:[
          {prop: "id", label: "编号", minWidth: 90},
          {prop: "legalRuleName", label: "权益名称", minWidth: 120},
          {prop: "legalRuleType", label: "权益类型", minWidth: 120,formatter: this.addressFormatter},
          {prop: "deptName", label: "所属组织", minWidth: 120},
          {prop: "deptType", label: "组织层级", minWidth: 120,formatter:this.typeFormatter},
          {prop: "createTime", label: "创建时间", minWidth: 120}, 
          ],
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
      };
    },
    methods: {
      changeStartDate: function() {
        var this_ = this;
        this_.endDateDisabled = {
          disabledDate: time => {
            if (this_.filters.startTime) {
              return time.getTime() <= new Date(this_.filters.startTime).getTime();
            }
          }
        };
      },
      changeEndDate: function() {
        var this_ = this;
        this_.startDateDisabled = {
          disabledDate: time => {
            if (this_.filters.endTime) {
              return time.getTime() >= new Date(this_.filters.endTime).getTime();
            }
          }
        };
      },
       // 换页刷新
      currentChange(pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      sizeChange(pageSize) {
        this.pageRequest.pageNum = 1;
        this.pageRequest.pageSize = pageSize;
        this.findPage();
      },
      addRule(){
        this.$router.push({path:"/AddPower", query:{id:0}});
      },

      //查看方法
      handleLookPower(data){
        this.$router.push({path:"/LookPowerTemplate", query:{id:data.id}});
      },
      //编辑方法
      handleEdit: function (data) {
        this.$router.push({path:"/EditPowerTemplate", query:{id:data.id}});
      },

    //删除方法
      handleDeleteParams(data){
        let query={}
        let this_=this
        query.id=data.id;
        query.legalRuleType=data.legalRuleType;
        this.$confirm("确认删除此条数据吗？", "提示", {
              type: "warning",
              closeOnClickModal: false
            }).then(() => {
              this_.utils.request.deletMemberLegalInfo(query,function(res){
                if (res.code == "0000") {
                  this_.$message({ message: "操作成功", type: "success" });
                } else {
                  this_.$message({ message: "操作失败 " + res.msg, type: "error" });
                }
                this_.findPage();
              })
            });
      },
      
       //点击搜索，页码重置
      findPageClick(){
        this.pageRequest.pageNum = 1;
        this.findPage();
      },
      // 获取分页数据
      findPage: function(data) {
        this.loading=true;
        if(data != null && data.start != null){
        if(data.start != null){
          this.pageRequest.pageNum = data.start;
        }
        if(data.limit != null){
          this.pageRequest.pageSize = data.limit;
        }
       }
        let this_ = this;
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = this.pageRequest.pageNum;
        this_.filters.limit = this.pageRequest.pageSize;
        this.utils.request.queryMemberLegalRuleList(this_.filters, function (res) {
          if (res.data == null) {
              res.data = [];
              res.totle = 0;
          }else{
            this_.loading=false;
            this_.tableList=res.data.rows;
            this_.totalSize=res.data.total;
          }
        });
      },
      //组织类型formatter
      typeFormatter:function(row, column, cellValue, index){
        if(this.deptType == 0){
          return '母平台'
        }else if(this.deptType == 1){
          return '子平台'
        }else if(this.deptType == 2){
          return '商家'
        }else if(this.deptType == 3){
          return '店铺'
        }
      },
      //地址formatter
      addressFormatter: function(row, column, cellValue, index){ 
        if(cellValue==1){
          return '购物权益'
        }else if(cellValue==2){
          return ' 积分权益'
        }else if(cellValue==3){
          return ' 物流权益'
        }else if(cellValue==4){
          return ' 活动特权'
        }else if(cellValue==5){
          return ' 内容特权'
        }else if(cellValue==6){
          return ' 服务特权'
        }else if(cellValue==7){
          return ' 等级升级'
        }
      },
      resetForm(formName) {
        //需要校验的key
        let keys = ["startTime","endTime","legalRuleName","legalRuleType"]
        let boo = this.seachTableUtils.checkFromIsNull(this.filters,keys)
        if(!boo){
          return
        }
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.filters={
            startTime:null, 
            endTime:null,
            legalRuleName:null,
            legalRuleType:null,
            status:2,
            };
          this.findPage(null);
        }
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
    },
    mounted() {
      this.findPage();
    }
  };
</script>

<style scoped lang='scss'>
 .type {
    display: flex;
    align-items: center;
  }
  .type p {
    text-align: right;
    margin-right: 20px;
    width: 120px;
  }
  .newUserOrder {
    margin-top: 2%;
    width: 20%;
    margin-left: 2%;
  }
  .font {
    font-size: 18px;
    font-weight: 800;
  }
  .ruleDes {
    color: #ffdead;
    font-size: 20px;
  }
  .positionDes {
    text-align: center;
    margin-top: 2%;
  }
  .ruleClass {
    font-size: 30px;
  }
  .everyCostHandleSel {
    /deep/ .el-input {
      width: 20%;
    }
  }
  .longInput{
    .timePicker{
      /deep/ .el-input{
        width: 201px !important;
      }
    }
  }
  .alignment{
    display: inline-block;
    height: 32px ;
    line-height: 32px;
    font-size: 16px;
  }
  .el-dialog-style{
    /deep/ .el-dialog{
      /deep/ .el-dialog__body{
        /deep/ .el-form-item__label{
          margin-right:10px
        }
      }
    }
  }
  .input100{
    /deep/ .el-input{
      width: 82px !important;
    }
  }
  .mb18{
  margin-bottom: 18px;
}

.mt18{
  margin-top: 18px;
}

// dialog标题的样式问题
.span-title{
   font-size: 28px;
   color: #333333;
}
//下拉选择框icon对齐
.iconAlignment{
  /deep/ .el-input__icon{
    line-height: 32px !important;
  }
}
.mb120{
  margin-bottom: 120px !important;
}
.mr60{
  margin-right: 60px !important;
}
/deep/ .w138{
  width: 138px !important;
  /deep/ .el-input__inner{
    width: 138px !important;
  }
}
/deep/ .w350{
  width: 350px !important;
  /deep/ .el-input__inner{
    width: 350px !important;
  }
}
.textRed{
  color: red !important;
}
.noMarginL{
  margin-left: 0 !important;
}
.w70{
  display: inline-block;
  width:70px !important
}
.colorOrange{
  color:#E7AA4E !important;
}
.turnInlineBlock{
  display: inline-block !important;
}
.successImg{
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
/deep/ .w115{
  display: inline-block;
  width: 110px;
  text-align: right;
}
.el-dialog-style{
  /deep/ .el-dialog{
    width: 610px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    /deep/ .el-dialog__body{
      padding: 40px 0 0 0;
    }
  }
}
.mb40{
  margin-bottom: 40px;
}
.labelText{
  color: #999999;
  font-size: 16px;
}
.w125{
  display: inline-block;
  width: 125px;
  text-align:right
}
.w90{
  display: inline-block;
  width: 90px;
  text-align: right;
}
/deep/ .editDialogInput125{
  width: 125px !important;
  /deep/ .el-input__inner{
    width: 125px !important;
  }
}
/deep/ .editDialogInput78{
  width: 78px !important;
  /deep/ .el-input__inner{
    width:78px !important;
  }
}
/deep/ .w275{
  width: 275px !important;
  /deep/ .el-input__inner{
    width: 275px !important;
  }
}
.color000{
  color: #000000;
}
.color333{
  color: #333333;
}
.color666{
  color: #666666;
}
.textColAlignment{
  display: inline-block;
  height: 32px;
  line-height: 32px;
}
.labelNoHeight{
  /deep/ .el-form-item__label{
    height: auto !important;
    line-height: 1 !important;
  }
}
.p_d40{
  padding-left: 40px;
}
.w200{
  /deep/ .el-input{
    width: 200px !important;
    /deep/ .el-input__inner{
      width: 200px !important;
    }
  }
}
.errorInfoPosition{
  /deep/ .el-form-item__error{
  left: 112px;
}
}
.labelTextColor666{
  /deep/ .el-form-item__label{
    color: #666666;
  }
}
.formItemNoMargin{
    margin-bottom: 0 !important;
}
.form-item-content-noMargin{
  /deep/ .el-form-item__content{
    margin-right: 0 !important;
  }
}
.width280{
  width: 280px !important;
}
.m_l5{
  margin-left: 5px !important;
}
.m_l10{
  margin-left: 10px !important;
}
/deep/ .textBtn{
  padding: 0 5px !important;
}
.mr5{
  margin-right: 5px   ;
}
.w108{
  width: 108px;
}
.labelMarginRight10{
  /deep/ .el-form-item__label{
    margin-right: 10px !important;
  }
}
/deep/ .w356{
  width: 356px !important;
  /deep/ .el-input__inner{
    width: 356px !important;
  }
}
.el-dialog-style{
/deep/   .el-dialog  {
    /deep/  .el-dialog__body{
      /deep/ .el-form-item__label{
          margin-right: 0 !important;
        }
    }
  } 
}
.w150{
  /deep/ .el-input{
     width: 150px !important;
  /deep/ .el-input__inner{
    width: 150px;
  }
  }
}
/deep/ .inputInner_paddingRight16{
  /deep/ .el-input__inner{
    padding-right: 16px !important;
  }
}
.width267{
  width: 267px !important;
}
.noPadding{
  padding: 0 !important;
}
.w78{
  width: 78px;
}
/deep/ .el-dialog__footer{
  padding: 0 !important;
}
.mb90{
  margin-bottom: 90px !important;
}
.w300{
  width: 300px !important;
}
.w316{
  width: 316px !important;
}
.w250{
  width: 250px !important;
}
.contentAlignment{
  height: auto !important;
  line-height: 1 !important;
}
.successImg{
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.search-input{
  .times {
    .times-to {
      padding: 0 10px;
      height: 32px;
      line-height: 32px;
      color: #999;
      display: inline-block;
    }
    /deep/ .el-input{
      width:208px !important;
       .el-input__inner{
        width: 208px !important;
      }
    }
  }
}
</style>
